<template>

    <el-container>
        <el-header style="text-align: right; font-size: 13px">
            <el-dropdown>
                <i class="el-icon-setting" style="margin-right: 15px"></i>
                <el-dropdown-menu v-slot="dropdown">
                    <el-dropdown-item @click.native="showPersonalInfo">个人资料</el-dropdown-item>
                    <el-dropdown-item @click.native="passwordFormVisible=true">密码修改</el-dropdown-item>
                    <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <span>{{nickName}}</span>
        </el-header>

        <div class="content" :class="{hasBg:$route.path=='/home'}">
            <router-view></router-view>
        </div>

        <!--个人信息弹出层 -->
        <el-dialog title="个人信息" :visible.sync="userFormVisible" width="50%" @close="clearPersonalDialog">
            <el-form :model="userForm" ref="userFormRef" :rules="userFormRules" label-width="80px"
                     label-position="left">
                <el-input v-model="userForm.id" autocomplete="off" v-show="false"></el-input>
                <el-form-item label="昵称" prop="nickName">
                    <el-input v-model="userForm.nickName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="userForm.sex" placeholder="请选择性别" style="width: 100%">
                        <el-option label="男" :value="1"></el-option>
                        <el-option label="女" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="userForm.city" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="userForm.tel" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="userFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editPersonalInfo">确 定</el-button>
            </div>
        </el-dialog>

        <!--修改密码弹出层 -->
        <el-dialog title="修改密码" :visible.sync="passwordFormVisible" width="40%" @close="clearPasswordDialog">
            <el-form :model="passwordForm" ref="passwordFormRef" label-width="80px" :rules="editPasswordFormRules"
                     label-position="top">
                <el-form-item label="请输入旧密码" prop="oldPassword">
                    <el-input v-model="passwordForm.oldPassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="请输入新密码" prop="newPassword">
                    <el-input v-model="passwordForm.newPassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="请确认密码" prop="confirmPassword">
                    <el-input v-model="passwordForm.confirmPassword" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="passwordFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editPassword">确 定</el-button>
            </div>
        </el-dialog>

    </el-container>
</template>

<script>
    import {editPersonalInfo, editPersonalPassword, getPersonalInfo, logout} from "@/api/user";

    export default {
        name: "RightView",
        data() {
            return {
                userFormVisible: false,
                passwordFormVisible: false,
                userFormRules: {
                    nickName: [
                        {required: true, message: '请输入昵称', trigger: 'blur'},
                    ]
                },
                userForm: {},
                passwordForm: {
                    oldPassword: '',
                    newPassword: '',
                    confirmPassword: ''
                },
                editPasswordFormRules: {
                    oldPassword: [
                        {required: true, message: '请输入原始密码', trigger: 'blur'},
                        {max: 8, min: 6, message: '密码长度6-8位', trigger: 'blur'},
                    ],
                    newPassword: [
                        {required: true, message: '请输入新密码', trigger: 'blur'},
                        {max: 8, min: 6, message: '新密码长度6-8位', trigger: 'blur'},
                    ],
                    confirmPassword: [
                        {required: true, message: '请确认密码', trigger: 'blur'},
                        {max: 8, min: 6, message: '新密码长度6-8位', trigger: 'blur'},
                    ]
                },
                nickName: localStorage.getItem("nickName")
            }
        },
        methods: {

            // 清空密码对话框
            clearPasswordDialog() {
                this.$refs.passwordFormRef.clearValidate()
                this.passwordForm = {
                    oldPassword: '',
                    newPassword: '',
                    confirmPassword: ''
                }
            },
            //显示个人信息对话框
            showPersonalInfo() {
                this.userFormVisible = true;
                getPersonalInfo().then(res => {
                    this.userForm = res.data
                })
            },
            //清空个人信息对话框
            clearPersonalDialog() {
                this.$refs.userFormRef.clearValidate()
                this.userForm = {}
            },
            //修改个人密码
            editPassword() {
                this.$refs.passwordFormRef.validate(v => {
                    if (v) {
                        //判定新密码和确认密码是否一致
                        if (!(this.passwordForm.newPassword == this.passwordForm.confirmPassword)) {
                            this.$message.warning("两次密码不一致")
                            return
                        }

                        editPersonalPassword(this.passwordForm).then(res => {
                            if (res.code == 0) {
                                this.$message.success(res.message)
                                this.passwordFormVisible = false;
                            }
                        })


                    }
                })
            },
            //编辑个人资料
            editPersonalInfo() {
                this.$refs.userFormRef.validate(v => {
                    if (v) {
                        editPersonalInfo(this.userForm).then(res => {
                            if (res.code == 0) {
                                this.$message.success(res.message)
                                this.userFormVisible = false;
                            }
                        })
                    }
                })
            },
            //安全退出
            logout() {
                logout().then(res => {
                    if (res.code == 0) {
                        this.$message({
                            type: "success",
                            message: res.message,
                            onClose: () => {
                                localStorage.removeItem("nickName")
                                localStorage.removeItem("token")
                                this.$store.commit("changMenuData",[])
                                this.$router.push("/login")
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped>

    .el-header {
        background-color: #fff;
        color: #333;
        line-height: 60px;
        box-shadow: 0px 5px 5px #ccc;
    }

    .el-icon-setting {
        cursor: pointer;
    }

    .hasBg {
        background: url("../../assets/data.gif") center top no-repeat;
        background-size: 100% 100%;
    }
    .content {
        padding: 20px;
        height: calc(100% - 100px);
    }

</style>
